<template>
	<view class="login">
			<u-navbar
				placeholder
				bgColor="transparent"
				@leftClick="backIndex"
			>
			</u-navbar>
		<!-- #ifdef H5||APP -->
		<block v-if="!wxLoading">
			<view class="form">
				<view class="logo">
					<image src="@/static/images/login_logo.png" mode="aspectFit"></image>
				</view>
				<view class="header">
					<view class="des">欢迎来到疯传数藏！</view>
				</view>
				<u--form labelPosition="top" labelWidth="70" :model="form" :rules="rules" errorType="toast" ref="uForm"
					:labelStyle="{color:'#000'}">
				<!-- <image slot="prefix" class="prefix" src="@/static/ico/phone_icon.png" mode=""></image> -->
					<u-form-item prop="username">
						<image slot="prefix" class="prefix" src="@/static/ico/phone_icon.png" mode=""></image>
						<!-- #ifndef APP-NVUE -->
						<u-input @input="getCaptcha" shape="circle" style="padding: 28rpx 36rpx;" type="number" v-model="form.username" :maxlength="11" placeholder="请输入手机号" border="none">
						<!-- #endif -->
							<u-icon slot="prefix" name="../../static/ico/phone_icon.png" size="20"></u-icon>
						<!-- #ifndef APP-NVUE -->
						</u-input>
						<!-- #endif -->
					</u-form-item>
					<block v-if="!type">
						<u-form-item prop="password">
							<u-input type="password" v-show="!pwdType" shape="circle" style="padding: 28rpx 36rpx;" v-model="form.password" placeholder="请输入密码" border="none">
								<u-icon slot="suffix" :name="pwdType?'eye-fill':'eye-off'" size="20" @tap="pwdType = !pwdType"></u-icon>
								<u-icon slot="prefix" name="../../static/ico/icon/lock_icon.png" size="20" />
							</u-input>
							<u-input type="text" v-show="pwdType" shape="circle" style="padding: 28rpx 36rpx;" v-model="form.password" placeholder="请输入密码" border="none">
								<u-icon slot="suffix" :name="pwdType?'eye-fill':'eye-off'" size="20" @tap="pwdType = !pwdType"></u-icon>
								<u-icon slot="prefix" name="../../static/ico/icon/lock_icon.png" size="20" />
							</u-input>
						</u-form-item>
					</block>
					<block v-if="form.username && form.password" class="captcha">
						<u-form-item prop="sms_code">
							<u-input shape="circle" style="padding: 12rpx 38rpx;" border="none" v-model="form.sms_code" placeholder="请输入验证码">
								<image @click="refreshCaptcha" class="captcha-img" slot="suffix" :src="captchaUrl" mode=""></image>
							</u-input>
							<!-- <u-row customStyle="margin-bottom: 10px">
								<u-col span="6">
									<u--input shape="circle" style="padding: 28rpx 36rpx;" border="none" v-model="form.sms_code" placeholder="请输入验证码">
									</u--input>
								</u-col>
								<u-col span="5">
									<image @click="refreshCaptcha" class="captcha-img" :src="captchaUrl" mode=""></image>
								</u-col>
							</u-row> -->
						</u-form-item>
					</block>
					<block v-if="type">
						<!-- <u-form-item prop="password" label="验证码">
								<Input :islabel="false" name="请输入验证码" type="password" v-model="form.password" />
							
							</u-form-item> -->
						<u-form-item prop="verify_code" label="验证码">
							<VerifyCode :islabel="false" name="验证码" :username="form.username" v-model="form.verify_code">
							</VerifyCode>
						</u-form-item>
					</block>
				</u--form>
				<view class="other" v-if="!isWxH5">
					<text @tap="tochanger()" style="visibility: hidden;">{{type?'密码登录':'验证码登录'}}</text>
					<text @tap="toPage('/pages/Login/backPassword')">忘记密码?</text>
				</view>
				<view class="submit">
					<u-button color="#468EFF" :disabled="disabled" :loading="loading" @click="submit">登录</u-button>
				</view>
				
				<view class="pact">
					<u-checkbox-group @change="changePact">
						<u-checkbox 
							labelColor="#8C93AA"
							:checked="pact"
							size="14"
							labelSize="12"
							shape="circle"
							name="1"
							label="阅读即同意"></u-checkbox>
					</u-checkbox-group>
					<!-- @tap="toPage('/pages/Pact/index?type=user_agreement'),pact=true" -->
					<text @click="toPage('/pages/Pact/index?type=user_agreement')">《用户服务协议》</text>
					和
					<text @click="toPage('/pages/Pact/index?type=privacy_agreement')">《隐私政策》</text>
				</view>
			</view>
			<view class="register">
				<view class="item">
					还没有账号？<text @tap="toPage('/subpage/newRegister/index')">立即注册</text>
				</view>
			</view>
			
			<u-popup bgColor="transparent" round="32rpx" :show="show" @close="show = false">
				<view class="draw-lots-main-popup savepadding savebottom">
					<view class="header flex al-item ju-cont">
						<view class="header-title">
							疯传数藏平台服务协议
							<!-- {{agreement.title}} -->
						</view>
						<view class="header-close">
							<u-icon @click="show = false" name="close" color="#999999" size="22"></u-icon>
						</view>
					</view>
					<!-- <scroll-view scroll-y class="draw-lots-list"> -->
						<PayPactServe />
					<!-- </scroll-view> -->
					<button @click="show=false;pact = true">我已阅读并同意</button>
				</view>
			</u-popup>
			
			<u-popup bgColor="transparent" round="32rpx" :show="show2" @close="show2 = false">
				<view class="draw-lots-main-popup savepadding savebottom">
					<view class="header flex al-item ju-cont">
						<view class="header-title">
							隐私政策
							<!-- {{agreement.title}} -->
						</view>
						<view class="header-close">
							<u-icon @click="show2 = false" name="close" color="#999999" size="22"></u-icon>
						</view>
					</view>
					<!-- <scroll-view scroll-y class="draw-lots-list"> -->
						<PayPactPrivacy/>
					<!-- </scroll-view> -->
					<button @click="show2=false;pact = true">我已阅读并同意</button>
				</view>
			</u-popup>
			<!-- <view class="pact">
				<u-checkbox-group @change="changePact">
					<u-checkbox 
					labelColor="#B1B2B5"
					labelSize="12" 
					name="1"
					:checked="pact"
					label="阅读即同意"></u-checkbox>
				</u-checkbox-group>
				<text @tap="toPage('/pages/Pact/index?type=user_agreement'),pact=true">《用户协议》</text>
				和
				<text @tap="toPage('/pages/Pact/index?type=privacy_agreement'),pact=true">《隐私政策》</text>
			</view> -->
			
			<!-- #endif -->

		</block>
		<!-- <u-modal :show="show" showCancelButton title="提示" content='是否同意相关协议' confirmText="同意并继续" @confirm="getUserInfo"
			@cancel="cancelPact"></u-modal> -->
		<!-- <tf-verify-img @succeed="chenggong" @close="showVerify = false" v-if="showVerify"></tf-verify-img> -->
	</view>
</template>

<script>
	import {
		mixin
	} from '@/Mixins/mixin.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import Input from '@/components/Input.vue'
	import VerifyCode from '@/components/verifycode.vue'
	import tfVerifyImg from '@/components/tf-verify-img/tf-verify-img.vue';
	import PayPactPrivacy from '@/components/PayPactPrivacy.vue';
	import PayPactServe from '@/components/PayPactServe.vue';
	export default {
		mixins: [mixin],
		components: {
			Input,
			VerifyCode,
			tfVerifyImg,
			PayPactPrivacy,
			PayPactServe
		},
		data() {
			return {
				btm: false,
				showTel: false,
				show: false,
				show2: false,
				pact: false,
				loading: false,
				session_key: '',
				openid: '',
				userinfo: {},
				type: false,
				form: {
					username: '',
					password: '',
					sms_code: '',
					verify_code: '',
				},
				captchaUrl: '',
				rules: {
					username: [{
							required: true,
							message: '请输入手机号',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								if(value.length<11) return false
								 // console.log()
							},
							message: '手机号码不正确',
							trigger: ['change', 'blur'],
						}
					],
					verify_code: [{
						required: false,
						message: '请输入验证码',
						trigger: ['blur', 'change']
					}],
					sms_code: [
						{
							required: true,
							message: '请输入验证码',
							trigger: ['blur', 'change']
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: ['blur', 'change']
						},
						{
							validator: (rule, value, callback) => {
								// let regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,16}$/
								// return regex.test(value);
								if(!value.length) return false
							},
							message: '密码不正确！',
							trigger: ['change', 'blur'],
						}
					]
				},
				showVerify: false,
				timer: null, // 防抖计时器
				pwdType: false,
				redirectUrl: ''
			}
		},
		onReady() {
			// this.toweichat()
		},
		onLoad(e) {
			// this.getCaptcha()
			if (e.redirect) {
				this.redirectUrl = '/' + e.redirect
			}
		},
		computed: {
			...mapState(['userInfo', 'token']),
			disabled() {
				let isDisabled = true
				if (this.type) {
					if (this.form.username && this.form.verify_code) {
						isDisabled = false
					} else {
						isDisabled = true
					}
				} else {
					if (this.form.username && this.form.password) {
						isDisabled = false
					} else {
						isDisabled = true
					}
				}
				return isDisabled
			},
			PWDTYPE () {
				return this.pwdType ? 'text' : 'password'
			}
		},
		methods: {
			backIndex () {
				uni.switchTab({
					url: '/pages/Index/index'
				})
			},
			changePwdType() {
				this.pwdType = !this.pwdType
				console.log(this.pwdType);
			},
			// 刷新图形验证码
			refreshCaptcha () {
				this.getCaptcha()
			},
			// 获取图形验证码
			getCaptcha () {
				try{
					if (!this.form.username) return
					clearTimeout(this.timer)
					this.timer = setTimeout(async () => {
						const res = await this.$http({
							url: this.$api.getCaptcha,
							method: 'POST',
							pay: true,
							hideLoading: true,
							// responseType: 'arraybuffer',
							data: {
								tel: this.form.username
							}
						})
						this.captchaUrl = typeof(res) === 'string' ? res : ''
					}, 1000)
				}catch(e){
					throw Error(e)
					//TODO handle the exception
				}
			},
			tochanger() {
				this.type = !this.type
			},
			chenggong() {
				// uni.showToast({
				//     title: '验证成功'
				// });
				this.H5Login()
				this.showVerify = false;
			},
			login() {
				// console.log(this.pact)
				if (!this.pact) {
					this.show = true
				} else {
					this.getUserInfo()
				}
			},
			//获取用户信息
			getUserInfo(e) {
				this.show = false
				this.pact = true
				// #ifdef H5||APP
				if (this.isWxH5) {
					this.WxLogin()
				} else {
					this.showVerify = true
					this.H5Login()
				}
				// #endif
			},

			cancelPact() {
				this.show = false
			},
			// 更改协议状态
			changePact(e) {
				if (e.length > 0) {
					this.pact = true
				} else {
					this.pact = false
				}
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					// console.log(this.type);
					if(!this.pact){
						uni.showToast({
						    title: '请勾选协议后继续',
							icon:'none',
						    duration: 2000
						})
						return
					}
					if (this.type) {
						this.H5Login()
					} else {
						this.login()
					}

				}).catch(errors => {
					console.log(errors)
					uni.$u.toast(errors[0].message)
				})
			},
			//登录
			async H5Login() {
				let put = this.type ? {
					username: this.form.username,
					verify_code: this.form.verify_code,
					type: 2
				} : {
					username: this.form.username,
					password: this.form.password,
					sms_code: this.form.sms_code,
					type: 1
				}
				this.loading = true
				let data = await this.$http({
					url: this.$api.login,
					method: 'POST',
					hideLoading: true,
					data: put
				})
				console.log('[登录]', data)
				this.loading = false
				if (data.code == 200) {
					let res = data.data
					this.$store.commit('ChangeUserInfo', res.member);
					this.$store.commit('ChangeToken', res.token);
					uni.switchTab({
						url: '/pages/Mine/index',
						fail(v) {
							console.log(v)
						}
					})
					// uni.navigateTo({
					// 	url: this.redirectUrl
					// })
				} else {
					uni.showToast({
						title: data.msg || '登录失败',
						icon: 'none',
						duration: 2000
					})
					this.form.sms_code = ''
					this.getCaptcha()
				}
			}
		},
		onNavigationBarButtonTap(e) {
			uni.navigateBack();
		}
	}
</script>

<style lang="scss" scoped>
	// #ifdef H5||APP
	.login {
		min-height: 100vh;
		// padding: 112rpx 40rpx 112rpx 40rpx;
		padding: 40rpx;
		box-sizing: border-box;
		// background-color: #FFF;
		background: url(@/static/images/timg2.png) no-repeat;
		display: flex;
		// align-items: center;
		flex-direction: column;
		justify-content: space-between;

		
		.form {
			position: relative;
			background: #FFFFFF;
			box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(183,192,210,0.1300);
			border-radius: 40rpx;
			padding: 0 50rpx;
			box-sizing: border-box;
			margin-top: 100rpx;
			.logo {
				text-align: center;
				position: absolute;
				left: 50%;
				top: -80rpx;
				transform: translateX(-50%);
				width: 180rpx;
				height: 180rpx;
				background: #FFFFFF;
				border: 6rpx solid #F6F9FF;
				border-radius: 50%;
				display: flex;
				justify-content: center;
				align-items: center;
				image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 18rpx;
				}
			}
			.u-input {
				background: #F5F9FF;
			}
			.u-button {
				width: 560rpx;
				height: 88rpx;
				border-radius: 55rpx;
			}
			.u-checkbox-group {
				margin-top: 4rpx;
			}
			// .u-form {
			// 	margin-top: 150rpx;
			// }
			.header {
				text-align: center;
				margin-top: 150rpx;
				// .title {
				// 	font-size: 48rpx;
				// 	font-weight: 400;
				// 	color: #000;
				// 	line-height: 68rpx;
				// 	letter-spacing: 2rpx;
				// }
			
				.des {
					font-size: 36rpx;
					font-weight: 600;
					color: #16172F;
					line-height: 42rpx;
					letter-spacing: 1rpx;
					// margin-bottom: 46rpx;
					margin: 55rpx 0;
				}
			}
		}
		

		::v-deep .u-form-item__body {
			padding: 20rpx 0;
		}

		.submit {
			margin-top: 40rpx;

			::v-deep button {
				color: #FFF;
				background: #000;
				border: 0;
				height: 74rpx;
				border-radius: 8rpx;

				&.u-button--disabled {
					opacity: 1;
					color: #FFF;
					background: #252525;
					font-size: 34rpx;
					font-weight: 600;
				}
			}
		}

		.other {
			text-align: right;
			font-size: 24rpx;
			font-weight: 400;
			color: #828282;
			line-height: 34rpx;
			margin-top: 26rpx;
			display: flex;
			justify-content: space-between;
		}

		.register {
			font-size: 24rpx;
			font-weight: 400;
			color: #999999;
			line-height: 34rpx;
			text-align: center;
			margin-top: 150rpx;

			text {
				color: #000;
			}
		}
		.captcha {
			&-img {
				width: 240rpx;
				height: 80rpx;
			}
		}
	}

	// #endif

	.pact {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #8C93AA;
		margin: 22rpx 0 40rpx;
		// margin-top: 48rpx;
		// ::v-deep .u-checkbox__icon-wrap {
		// 	background-color: transparent !important;
		// }

		text {
			// color: #FFFFFF;
			margin-top: 4rpx;
		}

	}

	::v-deep .u-modal__content__text {
		text-align: center;
	}

	::v-deep .u-popup {
		flex: 0;
	}
	.u-border-bottom {
		border-color: #f5f5f5 !important;
	}
	
	::v-deep.u-checkbox__icon-wrap--square {
		border-radius: 42rpx;
	}

	.draw-lots-main-popup {
		padding: 48rpx 38rpx;
		background: #1E2020;
		border-radius: 30rpx 30rpx 0px 0px;
	
		.header {
			display: flex;
			justify-content: space-between;
			&-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #FFFFFF;
				line-height: 44rpx;
			}
	
			// &-close {}
		}
	
		.draw-lots-list {
			margin-top: 20rpx;
			height: 50vh;
			overflow-y: auto;
	
			.pay-pact {
				font-size: 24rpx;
				font-weight: 400;
				color: #A0A0A0;
				line-height: 34rpx;
			}
		}
	
		button {
			height: 80rpx;
			font-size: 30rpx;
			font-weight: 600;
			color: #4E422C;
			background-color: #F2E0BC;
			line-height: 80rpx;
		}
	}
</style>
